<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            
           overflow: scroll;
           position: relative;
            background-color: red;
        }
        main{
            height: 1000px;
            background-image: linear-gradient(pink,aqua);
        }
    </style>
</head>

<body>
    <div>
        <p>苏丽敏1</p>
        <p>苏丽敏2</p>
        <p>苏丽敏3</p>
        <p>苏丽敏4</p>
        <p>苏丽敏5</p>
        <p>苏丽敏6</p>
        <p>苏丽敏7</p>
        <p>苏丽敏8</p>
        <p>苏丽敏9</p>
        <p>苏丽敏10</p>
        <p>苏丽敏11</p>
        <p>苏丽敏12</p>
        <p>苏丽敏13</p>
        <p>苏丽敏14</p>
        <p>苏丽敏15</p>
        <p>苏丽敏16</p>
        <p>苏丽敏17</p>
        <p>苏丽敏18</p>
        <p>苏丽敏19</p>
        <p>苏丽敏20</p>
        <p>苏丽敏21</p>
        <p>苏丽敏22</p>
        <p>苏丽敏23</p>
        <p>苏丽敏24</p>
        <p>苏丽敏25</p>
        <p>苏丽敏26</p>
        <p>苏丽敏27</p>
        <p>苏丽敏28</p>
        <p>苏丽敏29</p>
        <p>苏丽敏30</p>
        <p>苏丽敏31</p>
        <p>苏丽敏32</p>
        <p>苏丽敏33</p>
        <p>苏丽敏34</p>
        <p>苏丽敏35</p>
        <p>苏丽敏36</p>
        <p>苏丽敏37</p>
        <p>苏丽敏38</p>
        <p>苏丽敏39</p>
        <p>苏丽敏40</p>
        <p>苏丽敏41</p>
        <p>苏丽敏42</p>
        <p>苏丽敏43</p>
        <p>苏丽敏44</p>
        <p>苏丽敏45</p>
        <p>苏丽敏46</p>
        <p>苏丽敏47</p>
        <p>苏丽敏48</p>
        <p>苏丽敏49</p>
        <p>苏丽敏50</p>
        <p>苏丽敏51</p>
        <p>苏丽敏52</p>
        <p>苏丽敏53</p>
        <p>苏丽敏54</p>
        <p>苏丽敏55</p>
        <p>苏丽敏56</p>
        <p>苏丽敏57</p>
        <p>苏丽敏58</p>
        <p>苏丽敏59</p>
        <p>苏丽敏60</p>
        <p>苏丽敏61</p>
        <p>苏丽敏62</p>
        <p>苏丽敏63</p>
        <p>苏丽敏64</p>
        <p>苏丽敏65</p>
        <p>苏丽敏66</p>
        <p>苏丽敏67</p>
        <p>苏丽敏68</p>
        <p>苏丽敏69</p>
        <p>苏丽敏70</p>
        <p>苏丽敏71</p>
        <p>苏丽敏72</p>
        <p>苏丽敏73</p>
        <p>苏丽敏74</p>
        <p>苏丽敏75</p>
        <p>苏丽敏76</p>
        <p>苏丽敏77</p>
        <p>苏丽敏78</p>
        <p>苏丽敏79</p>
        <p>苏丽敏80</p>
        <p>苏丽敏81</p>
        <p>苏丽敏82</p>
        <p>苏丽敏83</p>
        <p>苏丽敏84</p>
        <p>苏丽敏85</p>
        <p>苏丽敏86</p>
        <p>苏丽敏87</p>
        <p>苏丽敏88</p>
        <p>苏丽敏89</p>
        <p>苏丽敏90</p>
        <p>苏丽敏91</p>
        <p>苏丽敏92</p>
        <p>苏丽敏93</p>
        <p>苏丽敏94</p>
        <p>苏丽敏95</p>
        <p>苏丽敏96</p>
        <p>苏丽敏97</p>
        <p>苏丽敏98</p>
        <p>苏丽敏99</p>
        <p>苏丽敏100</p>
    </div>
    <main></main>
    <script>
          var div = document.querySelector("div");
        //内容卷起事件
window.onscroll = function () {
   console.log("页面滚蛋");
   //获取文档卷起内容的高度
   console.log(document.documentElement.scrollTop);
}

/* window.onwheel = function () {
    console.log("滚轮事件");
} */

 window.onkeydown = function (e) {
    console.log("键盘按下事件",e);
    //e.key 是按下的键值
    //e.keyCode 是按下的键的键值码
    console.log(e.key);
    console.log(e.keyCode);
    var a = div.getBoundingClientRect();
    console.log(a);
    if (e.keyCode == 68) {
        div.style.left = a.left + 2 + "px";
    }
    if (e.keyCode == 65) {
        div.style.left = a.left - 20 + "px";
    }
} 
/* window.onresize = function () {
    console.log("浏览器窗口大学更改了");
} */
/* window.onkeyup = function () {
    console.log("键盘抬起");
} */
/* window.onkeypress = function () {
    console.log("键盘点击");
} */

        var div = document.querySelector("div");
          div.onclick = function () {    //onclick 点击事件
              console.log("div被点击了");
              
          }
        /* div.ondblclick = function () {    //ondblclick 双击事件
            console.log("div被点击了");
        } */
        /*  div.oncontextmenu = function () {    //oncontextmenu 右键点击事件
             console.log("div被点击了");
         }  */
        /*
                div.onmouseup = function () {    //onmouseup 抬起事件
                    console.log("div被点击了");
                }
                div.onmousedown = function () {    //onmousedown 按下事件
                    console.log("div被点击了");
                } */

        /* 给目标元素，以及所有后代元素都添加一对事件
        div.onmouseover = function () {    //onmouseover 移入事件
            console.log("div被点击了");
        }
        div.onmouseout = function () {    //onmouseout 移出事件
            console.log("div被点击了");
        }

        div.onmouseenter = function () {    //onmouseenter 移入事件
            console.log("div被点击了 一如");
        }
        div.onmouseleave = function () {    //onmouseleave 移出事件
            console.log("div被点击了 移出");
        } */

      /*   div.onmousemove = function () {
            console.log("===");
        } */


    </script>


</body>

</html>